<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:if test="${not empty param.starDistribution}">
	
	
	<c:set var="maxNumOfReviewInStar" value="0"/><%--max number of reviews for a star rating level--%>
	<c:forEach items="${fn:split(param.starDistribution,',')}" var="str" varStatus="status">
		<c:choose>
			<c:when test="${status.index eq 0}"><%--5 star--%>
				<c:set var="reviewNumFor5str" value="${str}"/>
			</c:when>
			<c:when test="${status.index eq 1}"><%--4 star--%>
				<c:set var="reviewNumFor4str" value="${str}"/>
			</c:when>
			<c:when test="${status.index eq 2}"><%--3 star--%>
				<c:set var="reviewNumFor3str" value="${str}"/>
			</c:when>
			<c:when test="${status.index eq 3}"><%--2 star--%>
				<c:set var="reviewNumFor2str" value="${str}"/>
			</c:when>
			<c:when test="${status.index eq 4}"><%--1 star--%>
				<c:set var="reviewNumFor1str" value="${str}"/>
			</c:when>
			<c:otherwise>
			</c:otherwise>
		</c:choose>
		<c:set var="totalNumOfReview" value="${totalNumOfReview+str}"/>
		<fmt:parseNumber var="num"  value="${str }"/>
		<c:if test="${num gt maxNumOfReviewInStar}">
			<c:set var="maxNumOfReviewInStar" value="${num}"/>
		</c:if>		
	</c:forEach>
		<fmt:formatNumber pattern="##.#" var="reviewPercentageFor5str" value="${100*reviewNumFor5str/totalNumOfReview}"/>
		<c:set var="barPercentageFor5str" value="${100*reviewNumFor5str/maxNumOfReviewInStar}" />
		
		<fmt:formatNumber pattern="##.#" var="reviewPercentageFor4str" value="${100*reviewNumFor4str/totalNumOfReview}"/>
		<c:set var="barPercentageFor4str" value="${100*reviewNumFor4str/maxNumOfReviewInStar}"/>
		
		<fmt:formatNumber pattern="##.#" var="reviewPercentageFor3str" value="${100*reviewNumFor3str/totalNumOfReview}"/>
		<c:set var="barPercentageFor3str" value="${100*reviewNumFor3str/maxNumOfReviewInStar}"/>
		
		<fmt:formatNumber pattern="##.#" var="reviewPercentageFor2str" value="${100*reviewNumFor2str/totalNumOfReview}"/>
		<c:set var="barPercentageFor2str" value="${100*reviewNumFor2str/maxNumOfReviewInStar}"/>
		
		<fmt:formatNumber pattern="##.#" var="reviewPercentageFor1str" value="${100*reviewNumFor1str/totalNumOfReview}"/>
		<c:set var="barPercentageFor1str" value="${100*reviewNumFor1str/maxNumOfReviewInStar}"/>
		<%--
	<div class="font-18 bold"><c:out value="${param.title}" escapeXml="false" default="Rating Distribution"/></div>
	<div class="font-16 font-lightgrey"><c:out value="${param.subtitle}" escapeXml="false" default="over ${totalNumOfReview} reviews"/></div>
		 --%>
	
	<div class="graph-container full-width">
		<div class="full-width float-left">
			<div class="graph-bars font-14 padding-vertical-half">
				<div class="graph-bar-container full-width position-rel margin-bottom">
					<div class="graph-bar star-5 margin-right-half text-center position-abs" style="width:${barPercentageFor5str}%"></div>
					<div class="graph-bar text-center position-rel" style="width:100%">${reviewNumFor5str} review<c:if test="${reviewNumFor5str gt 1}">s</c:if> (${reviewPercentageFor5str}%)</div>
				</div>
				<div class="graph-bar-container full-width position-rel margin-bottom">
					<div class="graph-bar star-4 margin-right-half text-center position-abs" style="width:${barPercentageFor4str}%"></div>
					<div class="graph-bar text-center position-rel" style="width:100%">${reviewNumFor4str} review<c:if test="${reviewNumFor4str gt 1}">s</c:if> (${reviewPercentageFor4str}%)</div>
				</div>
				<div class="graph-bar-container full-width position-rel margin-bottom">
					<div class="graph-bar star-3 margin-right-half text-center position-abs" style="width:${barPercentageFor3str}%"></div>
					<div class="graph-bar text-center position-rel" style="width:100%">${reviewNumFor3str} review<c:if test="${reviewNumFor3str gt 1}">s</c:if> (${reviewPercentageFor3str}%)</div>
				</div>
				<div class="graph-bar-container full-width position-rel margin-bottom">
					<div class="graph-bar star-2 margin-right-half text-center position-abs" style="width:${barPercentageFor2str}%"></div>
					<div class="graph-bar text-center position-rel" style="width:100%">${reviewNumFor2str} review<c:if test="${reviewNumFor2str gt 1}">s</c:if> (${reviewPercentageFor2str}%)</div>
				</div>
				<div class="graph-bar-container full-width position-rel">
					<div class="graph-bar star-1 margin-right-half text-center position-abs" style="width:${barPercentageFor1str}%"></div>
					<div class="graph-bar text-center position-rel" style="width:100%">${reviewNumFor1str} review<c:if test="${reviewNumFor1str gt 1}">s</c:if> (${reviewPercentageFor1str}%)</div>
				</div>
			</div>
		</div>
		<div class="graph-labels font-14 float-left text-right padding-vertical-half">
			<div class="graph-label">5 stars -</div>
			<div class="graph-label">4 stars -</div>
			<div class="graph-label">3 stars -</div>
			<div class="graph-label">2 stars -</div>
			<div class="graph-label">1 star -</div>
		</div>
	</div>
</c:if>